import React, { Component } from 'react'
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from './style';
import {connect} from 'react-redux'
import Topic from './components/Topic';
import  List  from './components/List';
import Writer from './components/Writer';
import Recommend from './components/Recommend';
import { controlScroll } from './store/actionCreator';
// import { SCROLL } from './store/actionTypes';


class index extends Component {
    handleBack(){
        window.scroll(0, 0)
    }
    render() {
        const {showScroll} = this.props
        return (
            <div>
                <HomeWrapper>
                    <HomeLeft>
                        <img className="img-banner"  src="https://upload.jianshu.io/admin_banners/web_images/4986/33b9e72aff1e083dfb5aa7a1c8a427e53fdc1e9e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"  alt="" />
                        <Topic />
                        <List />
                       
                    </HomeLeft>
                    <HomeRight>
                        <Recommend />
                        <Writer />

                    </HomeRight>
                </HomeWrapper>
                {showScroll?  <BackTop onClick={this.handleBack}>返回顶部</BackTop>: null}
               
            </div>
        )
    }
    componentDidMount(){
        this.bindEvents()
    }
    bindEvents(){
        window.addEventListener('scroll', this.props.changeScroll)
    }
}
const mapState = (state) => ({
    showScroll: state.home.get('showScroll')
})
const mapDispath = (dispatch) => ({
    changeScroll() {
        // console.log(document.documentElement.scrollTop)
        // dispatch(controlScroll())
        if(document.documentElement.scrollTop> 100){
            dispatch(controlScroll(true))
        }else{
            dispatch(controlScroll(false))
        }

    }
})


export default connect(mapState, mapDispath)(index)